<template>
  <div class="box">

    <section class="list-box" v-show="$route.path === '/systemSettings/category'">
      <el-table
        :data="tableData.list"
        border
        v-loading="tableLoading"
        height="calc(100vh - 140px)"
        class="table">
        <el-table-column
          type="selection"
          align="center"
          fixed="left"
          width="60">
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="60">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="categoryName"
          label="门类名称">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="categoryCode"
          label="门类代码">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="categoryType"
          label="类型">
          <template slot-scope="scope">
            <span>{{scope.row.categoryType | categoryType}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="isEnable"
          label="是否可用">
          <template slot-scope="scope">
            <el-switch @change="handleRowSwitch(scope.row)" v-model="scope.row.isEnable"></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          label="操作"
          width="300">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="handleAddEdit('修改', scope.row)">修改</el-button>
            <el-button type="text" icon="el-icon-circle-plus-outline" @click="handleAddEdit('创建类似', scope.row)">创建类似
            </el-button>
            <el-button type="text" icon="el-icon-view" @click="handleSee(scope.row)">元数据</el-button>
            <el-button @click="handleDel(scope.row)" icon="el-icon-delete" type="text" style="color: #F56C6C">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        v-if="tableData"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNo"
        :page-sizes="[20, 40, 60, 80]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(tableData.total)">
      </el-pagination>
    </section>

    <el-dialog :title="dialogTitle"
               width="50%"
               top="5vh"
               :destroy-on-close="true"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :visible.sync="dialogAddEdit">
      <div class="import-content">
        <establish-similar :type="type"
                           :formOption="establishFormOption"
                           :formData="objData"
                           v-if="dialogAddEdit"
                           @handleSuccess="handleSuccess">
        </establish-similar>
      </div>
    </el-dialog>

    <router-view v-show="$route.path === '/systemSettings/category/categoryDetails'"></router-view>

  </div>
</template>

<script>
import EstablishSimilar from '../settingComponents/category/establishSimilar'
import {
  delCategoryList, editCategoryInfo,
  getCategoryInfo,
  getCategoryList,
  queryCategoryInfo
} from '../../../../api/category/category'
import axios from 'axios'
import { getSysDicId } from '../../../../api/dictionary/dictionary'

export default {
  name: 'Category',
  components: {
    EstablishSimilar
  },
  // 门类设置
  data () {
    return {
      tableLoading: false,
      dialogTitle: '',
      dialogAddEdit: false,
      type: 'add',
      tableData: {},
      page: {
        pageNo: 1,
        pageSize: 20
      },
      rowData: {},
      objData: {}, // 表单数据
      establishFormOption: {} // 创建类似表单
    }
  },
  filters: {
    categoryType (val) {
      const dataObj = {
        jian: '组件',
        juan: '组卷',
        xiang: '项目'
      }
      return dataObj[val]
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      this.tableLoading = true
      getCategoryList(this.page).then(res => {
        this.tableData = res.data.data
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleSuccess () {
      this.getList()
      this.dialogAddEdit = false
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page.pageNo = val
      this.getList()
    },
    handleAddEdit (type, row) {
      // 创建类似、修改
      this.dialogTitle = type
      this.type = type === '创建类似' ? 'add' : 'edit'
      this.dialogAddEdit = true
      this.rowData = row || {}

      axios.all([
        getCategoryInfo(row.id),
        queryCategoryInfo(row.id),
        getSysDicId('category_type'),
        getSysDicId('table_type')
      ]).then(axios.spread((acct, perms, categoryType, tableType) => {
        const menleiInfo = acct.data.data
        const queryInfo = perms.data.data
        const title = {
          aj: '案卷目录',
          jn: '卷内目录',
          jh: '简化目录'
        }
        const objData = {
          categoryName: menleiInfo.categoryName, // 门类名称
          categoryCode: menleiInfo.categoryCode, // 门类代码
          categoryLogo: menleiInfo.categoryLogo, // 门类标识
          smallTypeName: menleiInfo.smallTypeName, // 类别名称
          orderNo: menleiInfo.orderNo, // 顺序号
          isEnable: menleiInfo.isEnable, // 可用
          categoryType: menleiInfo.categoryType, // 门类类型
          id: row.id// 门类id
        }
        this.establishFormOption = {
          group: [
            {
              label: '门类信息',
              arrow: false,
              prop: 'group1',
              column: [
                {
                  label: '门类名称',
                  prop: 'categoryName',
                  span: 24,
                  rules: [{
                    required: true,
                    message: '门类名称',
                    trigger: 'blur'
                  }]
                }, {
                  label: '门类代码',
                  prop: 'categoryCode',
                  span: 24,
                  rules: [{
                    required: true,
                    message: '门类代码',
                    trigger: 'blur'
                  }]
                }, {
                  label: '门类标识',
                  prop: 'categoryLogo',
                  span: 24,
                  rules: [{
                    required: true,
                    message: '门类标识',
                    trigger: 'blur'
                  }]
                }, {
                  label: '类别名称',
                  prop: 'smallTypeName',
                  span: 24
                }, {
                  label: '顺序号',
                  prop: 'orderNo',
                  type: 'number',
                  span: 14,
                  minRows: 1,
                  maxRows: 9999,
                  rules: [{
                    required: true,
                    message: '顺序号',
                    trigger: 'blur'
                  }]
                }, {
                  label: '可用',
                  prop: 'isEnable',
                  type: 'switch',
                  span: 8
                }, {
                  label: '门类类型',
                  prop: 'categoryType',
                  type: 'select',
                  span: 24,
                  disabled: true,
                  dicData: categoryType.data.data,
                  props: {
                    label: 'dictLabel',
                    value: 'dictValue'
                  }
                }
              ]
            }
          ]
        }
        queryInfo.map((item, index) => {
          objData['tableCode' + index] = item.tableCode // 表代码
          objData['tableName' + index] = item.tableName // 中文名
          objData['tableType' + index] = item.tableType // 表类型

          this.establishFormOption.group.push({
            label: title[item.tableType],
            arrow: false,
            prop: 'group' + (index + 2),
            column: [{
              label: '表代码',
              prop: 'tableCode' + index,
              disabled: type === '修改',
              span: 24,
              rules: [{
                required: true,
                message: '表代码',
                trigger: 'blur'
              }]
            }, {
              label: '中文名',
              prop: 'tableName' + index,
              span: 24,
              rules: [{
                required: true,
                message: '中文名',
                trigger: 'blur'
              }]
            }, {
              label: '表类型',
              prop: 'tableType' + index,
              type: 'select',
              span: 24,
              disabled: true,
              dicData: tableType.data.data,
              props: {
                label: 'dictLabel',
                value: 'dictValue'
              }
            }]
          })
        })
        this.$set(this, 'objData', objData)
      }))
    },
    handleSee (row) {
      // 查看
      this.$router.push({
        path: '/systemSettings/category/categoryDetails',
        query: {
          id: row.id
        }
      })
    },
    handleRowSwitch (row) {
      editCategoryInfo(row).then(() => {
        this.$message.success('操作成功！')
      })
    },
    handleDel (row) {
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delCategoryList([row.id]).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
